<template>
  <div class="g-bd">
    <div class="main f-fl">
      <div class="detail-wrap clearfix" v-if="albumdetail">
        <!-- 详情 -->
        <div class="clearfix">
          <!-- 歌曲照片 -->
          <div class="cvrwrap f-fl">
            <div class="u-cover">
              <img alt="" :src="albumdetail.album.picUrl + '?param=200y200'" />
              <span class="msk"></span>
            </div>
          </div>
          <!-- 歌曲详细内容 -->
          <div class="detail f-fr">
            <!-- 专辑标题 -->
            <div class="hd">
              <div class="u-icn"></div>
              <div class="tit">{{ albumdetail.album.name }}</div>
            </div>
            <!-- 歌手 -->
            <div class="user">
              <p class="intr">
                歌手:
                <router-link :to="`/artist?id=${albumdetail.album.artist.id}`" class="singer">{{
                  albumdetail.album.artist.name
                }}</router-link>
              </p>
              <p class="intr">发行时间: {{ albumdetail.album.publishTime | createTimeFormat }}</p>
              <p class="intr">发行公司: {{ albumdetail.album.company }}</p>
            </div>
            <!-- 操作按钮 -->
            <div class="tmhi-btn">
              <a
                href="javascript:void(0);"
                class="play u-btn2"
                title="播放"
                @click="playList(albumdetail.songs)"
                ><i><em class="icon-play u-btn2"></em>播放</i></a
              >
              <a
                href="javascript:void(0);"
                class="add u-btn2"
                title="添加到播放列表"
                @click="addToPlayList(albumdetail.songs)"
              ></a>
              <a href="javascript:void(0);" class="subscribed-count u-btn2" @click="$Message({ msg: '功能未开发' })"><i>收藏</i></a>
              <a href="javascript:void(0);" class="share-count u-btn2 btn2" @click="$Message({ msg: '功能未开发' })"
                ><i>({{ albumdetail.album.info.shareCount }})</i></a
              >
              <a href="javascript:void(0);" class="download u-btn2 btn2" @click="$Message({ msg: '功能未开发' })"><i>下载</i></a>
              <a href="javascript:void(0);" class="comment-count u-btn2 btn2" @click="$Message({ msg: '功能未开发' })"
                ><i>({{ albumdetail.album.info.commentCount }})</i></a
              >
            </div>
          </div>
        </div>
        <!-- 描述 -->
        <div class="descwrap">
          <h3>专辑介绍：</h3>
          <p class="desc" v-for="(item, index) in albumdetail.album.desc" :key="index">
            {{ item }}
          </p>
          <p
            class="hidedesc"
            v-for="(item, index) in albumdetail.album.desc"
            :key="(index + 1) * 3001"
            v-show="descflag"
          >
            {{ item }}
          </p>
          <div class="flat" v-if="albumdetail.album.hidedesc.length">
            <a href="javascript:void(0)" @click="descflag = !descflag"
              >{{ descflag ? '收起' : '展开' }}
              <i class="u-icn" :class="descflag ? 'u-icn-70' : ''"></i
            ></a>
          </div>
        </div>
        <!-- 榜单列表 -->
        <div class="tm-list">
          <!-- 榜单标题 -->
          <div class="tml-title">
            <h3>包含歌曲列表</h3>
            <span class="sub">
              <span>{{ albumdetail.songs.length }}</span
              >首歌</span
            >
            <div class="outer-link">
              <i class="u-icn"></i>
              <a href="javascript:;" @click="$Message({ msg: '功能未开发' })">生成外链播放器</a>
            </div>
          </div>
          <!-- 歌曲列表 -->
          <div class="tml-song-list">
            <div class="tmls-wrap">
              <table>
                <!-- 表格头部 -->
                <thead>
                  <tr>
                    <th class="rank-hd"></th>
                    <th class="title-hd"><div class="wp">歌曲标题</div></th>
                    <th class="duration-hd"><div class="wp wp-dura">时长</div></th>
                    <th class="singer-hd"><div class="wp">歌手</div></th>
                  </tr>
                </thead>
                <!-- 表格主体 -->
                <tbody>
                  <tr
                    v-for="(item, index) in albumdetail.songs"
                    :key="item.id"
                    :class="index % 2 === 0 ? 'even' : ''"
                  >
                    <!-- 排名 -->
                    <td class="tb-hd">
                      <div class="hd">
                        <span class="num">{{ index + 1 }}</span>
                        <div class="ply">
                          <span
                            class="icon"
                            @click="playSong(item)"
                            ref="coverRefs"
                            :class="item.id === currentSongId ? 'z-sel' : ''"
                          ></span>
                        </div>
                      </div>
                    </td>
                    <!-- 歌名 -->
                    <td class="title-tb">
                      <div class="f-fl">
                        <div class="dec">
                          <span class="decwrap">
                            <span class="txt"
                              ><router-link :to="`/song?id=${item.id}`">{{
                                item.name
                              }}</router-link></span
                            >
                            <span class="alia" v-if="item.alia[0]"> - ({{ item.alia[0] }})</span>
                            <router-link
                              :to="`/mv?id=${item.mv}`"
                              class="mv"
                              v-if="item.mv"
                            ></router-link>
                          </span>
                        </div>
                      </div>
                    </td>
                    <!-- 时长 -->
                    <td class="duration-tb">
                      <span class="dura">{{ item.dt | songDuration }}</span>
                      <div class="opt">
                        <a
                          href="javascript:;"
                          class="u-icn add"
                          title="添加到播放列表"
                          @click="addToPlayList(item)"
                        ></a>
                        <span
                          class="u-table icn-fav"
                          title="收藏"
                          @click="$Message({ msg: '功能未开发' })"
                        ></span>
                        <span
                          class="u-table icn-share"
                          title="分享"
                          @click="$Message({ msg: '功能未开发' })"
                        ></span>
                        <span
                          class="u-table icn-dl"
                          title="下载"
                          @click="$Message({ msg: '功能未开发' })"
                        ></span>
                      </div>
                    </td>
                    <!-- 歌手 -->
                    <td class="singer-tb">
                      <div class="singer" :title="item.arname">
                        <router-link
                          :to="`/artist?id=${art.id}`"
                          v-for="(art, index2) in item.ar"
                          :key="index2"
                          >{{
                            index2 == item.ar.length - 1 ? art.name : art.name + '/'
                          }}</router-link
                        >
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!-- 评论 -->
        <Comment :id="$route.query.id" :type="3" :hideHot="true"></Comment>
      </div>
    </div>
    <div class="aside f-fr">
      <div class="download">
        <h3 class="u-hd3">网易云音乐多端下载</h3>
        <ul class="dllist">
          <li><a href="https://itunes.apple.com/cn/app/id590338362" class="ios"></a></li>
          <li><a href="https://music.163.com/api/pc/download/latest" class="pc"></a></li>
          <li><a href="https://music.163.com/api/android/download/latest2" class="aos"></a></li>
        </ul>
        <p>同步歌单，随时畅听320k好音乐</p>
      </div>
      <h3 class="u-hd3">用户wiki</h3>
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo.png" alt="" /> 补充或修改歌曲资料</a
      >
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo1.png" alt="" /> 用户wiki任务中心</a
      >
    </div>
  </div>
</template>

<script>
import Comment from '@/components/Comment/Comment.vue'
import { createTimeFormat, songDuration } from '@/utils/filters.js'
import { currentSongId } from '@/utils/methods.js'
export default {
  components: { Comment },
  data() {
    return {
      // 专辑详情
      albumdetail: null,
      descflag: false
    }
  },
  methods: {
    // 获取专辑详情
    async getAlbumDetail() {
      const { data } = await this.$http.get(`/album?id=${this.$route.query.id}`)
      // 处理歌单介绍
      const reg = /\n/g
      const desc = data.album.description
      const descList = desc.split(reg)
      // // console.log(descList)

      data.album.desc = descList.slice(0, 15)
      data.album.hidedesc = descList.slice(15)
      // // this.lrc = templrcList.slice(0, 15).join('</br>')
      // // this.hideLrc = templrcList.slice(15).join('</br>')
      // this.playDetail = data.playlist
      // // 处理艺术家名称
      // let artisName = []
      // this.playDetail.tracks.forEach(item => {
      //   item.ar.forEach(artis => {
      //     artisName.push(artis.name)
      //   })
      //   item.arname = artisName.join('/')
      //   artisName = []
      // })
      this.albumdetail = data
      console.log(data)
    },
    // 将播放列表替换为榜单列表
    playList(tracks) {
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
    },
    // 添加到播放列表
    addToPlayList(tracks) {
      if (!(tracks instanceof Array)) {
        if (tracks.fee !== 0 && tracks.fee !== 8) {
          this.$Message({ msg: '无版权/VIP歌曲' })
        }
      }
      this.$store.commit('Music/pushSongList', tracks)
    },
    // playSong(item) {
    //   this.$store.commit('setplayerSettingIndex', this.$store.state.songList.length)
    //   this.$store.commit('pushSongList', item)
    // },
    playSong(tracks) {
      // console.log(tracks)
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      if (tracks.fee === 0 || tracks.fee === 8) {
        this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
      } else {
        this.$Message({ msg: '无版权/VIP歌曲' })
      }
    }
  },
  filters: { createTimeFormat, songDuration },
  computed: { currentSongId },
  created() {
    this.getAlbumDetail()
  }
}
</script>

<style lang="less" scoped>
.g-bd {
  overflow: hidden;
  .main {
    width: 708px;
    border-right: 1px solid #ccc;
    padding: 47px 30px 40px 39px;
    .detail-wrap {
      // overflow: hidden;
      .cvrwrap {
        .u-cover {
          width: 177px;
          height: 177px;
          float: left;
          position: relative;
          display: inline;
          margin: 0 -220px 0 0;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          .msk {
            position: absolute;
            top: 0;
            left: 0;
            width: 209px;
            height: 177px;
            background-position: 0 -986px;
          }
        }
      }
      .detail {
        // margin-top: 10px;
        width: 414px;
        text-align: left;
        .hd {
          margin-bottom: 12px;
          .u-icn {
            float: left;
            width: 54px;
            height: 24px;
            background-position: 0 -186px;
          }
          .tit {
            margin-left: 64px;
            position: relative;
            top: -1px;
            font-size: 20px;
            line-height: 24px;
            font-weight: normal;
          }
        }

        .user {
          margin: 0 0 20px;
          line-height: 18px;
          .intr {
            margin-top: 4px;
            .singer {
              color: #0c73c2;
            }
          }
        }
        .tmhi-btn {
          // position: relative;
          margin-bottom: 25px;
          margin-right: -10px;
          height: 31px;
          .play {
            float: left;
            display: inline-block;
            width: 66px;
            height: 31px;
            padding-right: 5px;
            background-position: right -428px;
            // background: url(../../assets/images/button2.png) no-repeat right -428px;
            line-height: 31px;
            color: #fff;
            i {
              display: inline-block;
              width: 61px;
              height: 31px;
              line-height: 31px;
              background-position: 0 -387px;
              // background: url(../../assets/images/button2.png) no-repeat 0 -387px;
              .icon-play {
                display: inline-block;
                width: 20px;
                height: 18px;
                margin: 6px 2px 2px 8px;
                vertical-align: top;
                background-position: 0 -1622px;

                // background: url(../../assets/images/button2.png) no-repeat 0 -1622px;
              }
            }
          }
          .add {
            margin-right: 6px;
            float: left;
            display: inline-block;
            width: 31px;
            height: 31px;
            background-position: 0 -1588px;
            // background: url(../../assets/images/button2.png) no-repeat 0 -1588px;
          }
          .subscribed-count {
            float: left;
            height: 31px;
            line-height: 20px;
            min-width: 23px;
            margin-right: 6px;
            padding-right: 2px;
            cursor: pointer;
            font-family: simsun, \5b8b\4f53;
            background-position: right -1020px;
            // background: url(../../assets/images/button2.png) no-repeat right -1020px;
            i {
              display: block;
              height: 31px;
              line-height: 30px;
              min-width: 23px;
              cursor: pointer;
              padding-right: 2px;
              padding-left: 28px;
              background-position: 0 -977px;
              // background: url(../../assets/images/button2.png) no-repeat 0 -977px;
            }
          }
          .share-count {
            background-position: right -1020px;
            i {
              background-position: 0 -1225px;
            }
          }
          .download {
            background-position: right -1020px;
            i {
              background-position: 0 -2761px;
            }
          }
          .comment-count {
            background-position: right -1020px;
            i {
              background-position: 0 -1465px;
            }
          }
          .btn2 {
            float: left;
            height: 31px;
            line-height: 20px;
            min-width: 23px;
            margin-right: 6px;
            padding-right: 2px;
            cursor: pointer;
            font-family: simsun, \5b8b\4f53;
            // background: url(../../assets/images/button2.png) no-repeat;
            i {
              float: left;
              height: 31px;
              line-height: 30px;
              min-width: 23px;
              cursor: pointer;
              display: block;
              // background: url(../../assets/images/button2.png) no-repeat;
              padding-right: 2px;
              padding-left: 28px;
            }
          }
        }

        .tag {
          line-height: 22px;
          a {
            float: left;
            height: 22px;
            line-height: 22px;
            margin: 0px 10px 3px 0;
            padding: 0 9px 0 0;
            text-shadow: 0 1px #fdfdfd;
            background-position: right -27px;
            color: #777;
            text-decoration: none;
            i {
              position: relative;
              zoom: 1;
              padding: 0 3px 0 13px;
              background-position: 0 0;
              float: left;
              height: 22px;
              line-height: 22px;
            }
          }
        }
        .title {
          float: left;
          font-weight: normal;
          color: #666;
        }
      }
      .descwrap {
        margin-top: 20px;
        line-height: 18px;
        // color: #666;
        h3 {
          font-size: 100%;
        }
        p {
          color: #666;
          text-indent: 2em;
          line-height: 24px;
          margin-top: 4px;
        }
        .flat {
          margin-top: 5px;
          a {
            color: #0c73c2;
            .u-icn {
              width: 11px;
              height: 8px;
              background-position: -65px -520px;
            }
            .u-icn-70 {
              background-position: -45px -520px;
            }
          }
        }
      }
    }
    .tm-list {
      margin-top: 27px;
      padding-bottom: 40px;
      .tml-title {
        height: 33px;
        border-bottom: 2px solid #c20c0c;
        h3 {
          float: left;
          font-size: 20px;
          line-height: 28px;
          font-weight: normal;
        }
        .sub {
          float: left;
          margin: 9px 0 0 20px;
          color: #666;
        }
        .outer-link {
          float: right;
          margin-top: 5px;
          margin-right: 20px;
          .u-icn {
            width: 16px;
            height: 16px;
            background-position: -34px -863px;
          }
          a {
            margin-left: 10px;
            text-decoration: underline;
            color: #0c73c2;
          }
        }
        .play-count {
          float: right;
          margin-top: 5px;
          color: #666;
          strong {
            color: #c20c0c;
          }
        }
      }
      .tml-song-list {
        .tmls-wrap {
          table {
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
            border: 1px solid #d9d9d9;
            thead {
              th {
                height: 38px;
                background-color: #f7f7f7;
                vertical-align: top;
                text-align: left;
                font-weight: normal;
                color: #666;
                background: url(~@/assets/images/header/table.png);
                background-position: 0 0;
                background-repeat: repeat-x;
                .wp {
                  height: 18px;
                  line-height: 18px;
                  padding: 8px 10px;
                  background: url(~@/assets/images/header/table.png) no-repeat;
                  background-position: 0 -56px;
                  box-sizing: content-box;
                }
                .wp-dura {
                  width: 91px;
                }
              }
              .rank-hd {
                width: 54px;
                background-position: 0 0;
              }
              .title-hd {
                width: 345px;
              }
              .duration-hd {
                width: 71px;
                box-sizing: content-box;
              }
              .singer-hd {
                width: 127px;
              }
            }
            tbody {
              tr {
                &.even {
                  background-color: #f7f7f7;
                }
                &:hover .duration-tb .opt {
                  display: block;
                }
                &:hover .duration-tb .dura {
                  display: none;
                }
                td {
                  padding: 6px 10px;
                  line-height: 18px;
                  text-align: left;
                  background: url(~@/assets/images/header/table.png) no-repeat 0 9999px;
                }
                .hd {
                  width: 54px;
                  height: 18px;
                  .num {
                    float: left;
                    width: 25px;
                    margin-left: 0;
                    text-align: center;
                  }
                  .ply {
                    float: right;
                    width: 32px;
                    margin-right: -5px;
                    text-align: center;
                    .icon {
                      display: block;
                      float: none;
                      margin: 0 auto;
                      padding-left: 0;
                      width: 17px;
                      height: 17px;
                      overflow: hidden;
                      background: url(~@/assets/images/header/table.png) no-repeat;
                      background-position: 0 -103px;
                      &:hover {
                        // background-position: 0 0;
                        background-position: 0 -128px !important;
                      }
                      &.z-sel {
                        background-position: -20px -128px;
                        &:hover {
                          // background-position: 0 0;
                          background-position: -20px -128px !important;
                        }
                      }
                    }
                  }
                }
                .title-tb {
                  float: left;
                  width: 345px;
                  .dec {
                    // width: 200px;
                    margin-right: 20px;
                    height: 18px;

                    .decwrap {
                      // max-width: 99%;
                      display: inline-block;
                      max-width: 320px;
                      word-wrap: break-word;
                      position: relative;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      margin-right: -25px;
                      padding-right: 25px;
                      .mv {
                        position: absolute;
                        top: 0;
                        right: 0;
                        // float: left;
                        width: 23px;
                        height: 17px;
                        margin: 1px 0 0 0;
                        background-position: 0 -151px;
                      }

                      .alia {
                        color: #aeaeae;
                      }
                    }
                  }
                }
                .duration-tb {
                  width: 71px;
                  .opt {
                    display: none;
                    float: left;
                    .add {
                      float: left;
                      margin-top: 2px;
                      width: 13px;
                      height: 13px;
                      background-position: 0 -700px;
                      &:hover {
                        background-position: -22px -700px;
                      }
                    }
                    .icn-fav {
                      background-position: 0 -174px;
                      &:hover {
                        background-position: -20px -174px;
                      }
                    }
                    .icn-share {
                      background-position: 0 -195px;
                      &:hover {
                        background-position: -20px -195px;
                      }
                    }
                    .icn-dl {
                      background-position: -81px -174px;
                      &:hover {
                        background-position: -104px -174px;
                      }
                    }
                  }
                }
                .singer-tb {
                  .singer {
                    width: 70px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
        }
      }
      .play-list-more {
        width: 100%;
        height: 66px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        margin-top: 30px;
        margin-bottom: -10px;
        p {
          font-size: 13px;
          color: #333333;
        }
        .download {
          width: 120px;
          height: 30px;
          background-image: linear-gradient(90deg, #ff5a4c 0%, #ff1d12 100%);
          border-radius: 18px;
          line-height: 30px;
          font-size: 12px;
          color: #ffffff;
          text-align: center;
          text-decoration: none;
        }
      }
    }
  }
  .aside {
    position: relative;
    float: right;
    width: 270px;
    padding: 20px 40px 40px 30px;
    .u-hd3 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      color: #333;
      font-size: 100%;
    }
    .piclist {
      margin-bottom: 25px;
      overflow: hidden;
      li {
        float: left;
        margin-bottom: 10px;
        display: inline;
        padding: 0 0 10px 10px;
        width: 50px;
        height: 50px;
      }
    }
    .hotlist {
      li {
        margin-bottom: 10px;
        .coverImg {
          float: left;
          width: 50px;
          height: 50px;
          margin-right: 5px;
          img {
            width: 100%;
          }
        }
        p {
          width: 140px;
          height: 24px;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          .name {
            color: #000;
            font-size: 14px;
          }
          .by {
            color: #999;
          }
          .nickname {
            max-width: 106px;
            margin: 0 2px 0 4px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
          .identity {
            height: 13px;
            width: 13px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
    .download {
      margin: 20px 0;
      padding-bottom: 20px;
      .dllist {
        height: 65px;
        margin-bottom: 10px;
        background: url(~@/assets/images/sprite.png);
        background-position: 0 -392px;
        li {
          float: left;
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
          .ios {
          }
          .pc {
            width: 60px;
            margin: 0 26px 0 30px;
          }
          .aos {
          }
        }
      }
      p {
        color: #999;
      }
    }
    .wiki-edit {
      margin-bottom: 10px;
      display: block;
      text-align: left;
      line-height: 20px;
      img {
        vertical-align: middle;
        margin-top: -2px;
      }
    }
  }
}
</style>
